function MainComponent() { const [links, setLinks] = React.useState([]); const [filterStatus, setFilterStatus] = React.useState("All"); const [sortField, setSortField] = React.useState("dateContacted"); const [sortDirection, setSortDirection] = React.useState("desc"); const [isExporting, setIsExporting] = React.useState(false); const [exportMessage, setExportMessage] = React.useState(""); const [hoveredRow, setHoveredRow] = React.useState(null); React.useEffect(()=>{ const sampleData = [ { id: 1, website: "example.com", targetUrl: "https://example.com/page", anchorText: "Example Anchor", linkType: "Dofollow", contactEmail: "contact@example.com", status: "Contacted", notes: "Initial outreach sent", dateContacted: "2025-01-15", followUpDate: "2025-01-22" }, { id: 2, website: "anothersite.org", targetUrl: "https://anothersite.org/resources", anchorText: "Resource Link", linkType: "Nofollow", contactEmail: "editor@anothersite.org", status: "Live", notes: "Published on their resources page", dateContacted: "2025-01-10", followUpDate: "" } ]; const savedLinks = localStorage.getItem("linkBuildingData"); if (savedLinks) { setLinks(JSON.parse(savedLinks)); } else { setLinks(sampleData); } }, []); React.useEffect(()=>{ if (links.length > 0) { localStorage.setItem("linkBuildingData", JSON.stringify(links)); } }, [ links ]); const addNewRow = ()=>{ const newId = links.length > 0 ? Math.max(...links.map((link)=>link.id)) + 1 : 1; const today = new Date().toISOString().split("T")[0]; const newRow = { id: newId, website: "", targetUrl: "", anchorText: "", linkType: "Dofollow", contactEmail: "", status: "Contacted", notes: "", dateContacted: today, followUpDate: "" }; setLinks([ ...links, newRow ]); }; const updateCell = (id, field, value)=>{ const updatedLinks = links.map((link)=>link.id === id ? { ...link, [field]: value } : link); setLinks(updatedLinks); }; const deleteRow = (id)=>{ const updatedLinks = links.filter((link)=>link.id !== id); setLinks(updatedLinks); }; const filteredLinks = filterStatus === "All" ? links : links.filter((link)=>link.status === filterStatus); const sortedLinks = [ ...filteredLinks ].sort((a, b)=>{ if (a[sortField] < b[sortField]) return sortDirection === "asc" ? -1 : 1; if (a[sortField] > b[sortField]) return sortDirection === "asc" ? 1 : -1; return 0; }); const toggleSort = (field)=>{ if (sortField === field) { setSortDirection(sortDirection === "asc" ? "desc" : "asc"); } else { setSortField(field); setSortDirection("asc"); } }; const totalLinks = links.length; const liveLinks = links.filter((link)=>link.status === "Live").length; const today = new Date(); const followUpsCount = links.filter((link)=>{ if (!link.followUpDate) return false; const followUpDate = new Date(link.followUpDate); return followUpDate <= today && link.status !== "Live" && link.status !== "Rejected"; }).length; const exportToExcel = ()=>{ setIsExporting(true); setExportMessage("Preparing Excel file..."); try { const worksheet = [ [ "Website/Domain", "Target URL", "Anchor Text", "Link Type", "Contact Email", "Status", "Notes", "Date Contacted", "Follow-up Date" ] ]; sortedLinks.forEach((link)=>{ worksheet.push([ link.website, link.targetUrl, link.anchorText, link.linkType, link.contactEmail, link.status, link.notes, link.dateContacted, link.followUpDate ]); }); let csvContent = worksheet.map((row)=>row.map((cell)=>`"${String(cell || "").replace(/"/g, '""')}"`).join(",")).join("\n"); const blob = new Blob([ csvContent ], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }); const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.style.display = "none"; a.href = url; a.download = `link-building-tracker-${new Date().toISOString().split("T")[0]}.xlsx`; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a); setExportMessage("Excel file downloaded successfully!"); setTimeout(()=>setExportMessage(""), 3000); } catch (error) { console.error("Export error:", error); setExportMessage(`Error: ${error.message}`); } finally{ setIsExporting(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "w-full bg-transparent", __source: { fileName: "", lineNumber: 185, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full mx-auto p-3", __source: { fileName: "", lineNumber: 186, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-3", __source: { fileName: "", lineNumber: 187, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 188, columnNumber: 11 }, __self: this }, "Link Building Tracker")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-2 mb-3", __source: { fileName: "", lineNumber: 193, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-2 rounded-md bg-white shadow-sm border border-gray-200 flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 194, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xs font-semibold text-gray-600", __source: { fileName: "", lineNumber: 195, columnNumber: 13 }, __self: this }, "Total Links"), /*#__PURE__*/ React.createElement("span", { className: "text-lg font-bold text-gray-800", __source: { fileName: "", lineNumber: 198, columnNumber: 13 }, __self: this }, totalLinks)), /*#__PURE__*/ React.createElement("div", { className: "p-2 rounded-md bg-white shadow-sm border border-gray-200 flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 202, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xs font-semibold text-gray-600", __source: { fileName: "", lineNumber: 203, columnNumber: 13 }, __self: this }, "Live Links"), /*#__PURE__*/ React.createElement("span", { className: "text-lg font-bold text-green-600", __source: { fileName: "", lineNumber: 206, columnNumber: 13 }, __self: this }, liveLinks)), /*#__PURE__*/ React.createElement("div", { className: "p-2 rounded-md bg-white shadow-sm border border-gray-200 flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 210, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xs font-semibold text-gray-600", __source: { fileName: "", lineNumber: 211, columnNumber: 13 }, __self: this }, "Follow-ups Due"), /*#__PURE__*/ React.createElement("span", { className: "text-lg font-bold text-amber-600", __source: { fileName: "", lineNumber: 214, columnNumber: 13 }, __self: this }, followUpsCount))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row justify-between items-center mb-3 gap-2", __source: { fileName: "", lineNumber: 220, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row gap-2 w-full sm:w-auto", __source: { fileName: "", lineNumber: 221, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 222, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: filterStatus, onChange: (e)=>setFilterStatus(e.target.value), className: "p-1 rounded-md text-sm bg-white text-gray-800 border border-gray-300 shadow-sm", __source: { fileName: "", lineNumber: 223, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "All", __source: { fileName: "", lineNumber: 228, columnNumber: 17 }, __self: this }, "All Statuses"), /*#__PURE__*/ React.createElement("option", { value: "Contacted", __source: { fileName: "", lineNumber: 229, columnNumber: 17 }, __self: this }, "Contacted"), /*#__PURE__*/ React.createElement("option", { value: "Replied", __source: { fileName: "", lineNumber: 230, columnNumber: 17 }, __self: this }, "Replied"), /*#__PURE__*/ React.createElement("option", { value: "Live", __source: { fileName: "", lineNumber: 231, columnNumber: 17 }, __self: this }, "Live"), /*#__PURE__*/ React.createElement("option", { value: "Rejected", __source: { fileName: "", lineNumber: 232, columnNumber: 17 }, __self: this }, "Rejected"), /*#__PURE__*/ React.createElement("option", { value: "No Response", __source: { fileName: "", lineNumber: 233, columnNumber: 17 }, __self: this }, "No Response"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 236, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: sortField, onChange: (e)=>{ setSortField(e.target.value); setSortDirection("asc"); }, className: "p-1 rounded-md text-sm bg-white text-gray-800 border border-gray-300 shadow-sm", __source: { fileName: "", lineNumber: 237, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "dateContacted", __source: { fileName: "", lineNumber: 245, columnNumber: 17 }, __self: this }, "Sort: Date Contacted"), /*#__PURE__*/ React.createElement("option", { value: "followUpDate", __source: { fileName: "", lineNumber: 246, columnNumber: 17 }, __self: this }, "Sort: Follow-up Date"), /*#__PURE__*/ React.createElement("option", { value: "website", __source: { fileName: "", lineNumber: 247, columnNumber: 17 }, __self: this }, "Sort: Website"), /*#__PURE__*/ React.createElement("option", { value: "status", __source: { fileName: "", lineNumber: 248, columnNumber: 17 }, __self: this }, "Sort: Status")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSortDirection(sortDirection === "asc" ? "desc" : "asc"), className: "ml-1 px-2 py-1 rounded-md bg-white text-gray-800 border border-gray-300 shadow-sm", __source: { fileName: "", lineNumber: 250, columnNumber: 15 }, __self: this }, sortDirection === "asc" ? "↑" : "↓"))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 w-full sm:w-auto", __source: { fileName: "", lineNumber: 260, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: addNewRow, className: "px-3 py-1 rounded-md bg-blue-500 hover:bg-blue-600 text-white text-sm flex items-center shadow-sm", __source: { fileName: "", lineNumber: 261, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-1", __source: { fileName: "", lineNumber: 265, columnNumber: 15 }, __self: this }, "+"), " Add Row"), /*#__PURE__*/ React.createElement("button", { onClick: exportToExcel, disabled: isExporting, className: "px-3 py-1 rounded-md bg-green-500 hover:bg-green-600 text-white text-sm flex items-center shadow-sm disabled:opacity-50", __source: { fileName: "", lineNumber: 267, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-1", __source: { fileName: "", lineNumber: 272, columnNumber: 15 }, __self: this }, "📥"), " Export to Excel (.xlsx)"))), exportMessage && /*#__PURE__*/ React.createElement("div", { className: `p-2 mb-3 rounded-md text-sm ${exportMessage.includes("Error") ? "bg-red-100 text-red-700 border border-red-200" : "bg-green-100 text-green-700 border border-green-200"}`, __source: { fileName: "", lineNumber: 278, columnNumber: 11 }, __self: this }, exportMessage), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto border border-gray-200 rounded-md shadow-sm bg-white", __source: { fileName: "", lineNumber: 289, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full border-collapse text-gray-800", __source: { fileName: "", lineNumber: 290, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 291, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-50", __source: { fileName: "", lineNumber: 292, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-1.5 text-left border-b border-r border-gray-200 text-xs font-medium text-gray-600", __source: { fileName: "", lineNumber: 293, columnNumber: 17 }, __self: this }, "Website/Domain"), /*#__PURE__*/ React.createElement("th", { className: "p-1.5 text-left border-b border-r border-gray-200 text-xs font-medium text-gray-600", __source: { fileName: "", lineNumber: 296, columnNumber: 17 }, __self: this }, "Target URL"), /*#__PURE__*/ React.createElement("th", { className: "p-1.5 text-left border-b border-r border-gray-200 text-xs font-medium text-gray-600", __source: { fileName: "", lineNumber: 299, columnNumber: 17 }, __self: this }, "Anchor Text"), /*#__PURE__*/ React.createElement("th", { className: "p-1.5 text-left border-b border-r border-gray-200 text-xs font-medium text-gray-600", __source: { fileName: "", lineNumber: 302, columnNumber: 17 }, __self: this }, "Link Type"), /*#__PURE__*/ React.createElement("th", { className: "p-1.5 text-left border-b border-r border-gray-200 text-xs font-medium text-gray-600", __source: { fileName: "", lineNumber: 305, columnNumber: 17 }, __self: this }, "Contact Email"), /*#__PURE__*/ React.createElement("th", { className: "p-1.5 text-left border-b border-r border-gray-200 text-xs font-medium text-gray-600", __source: { fileName: "", lineNumber: 308, columnNumber: 17 }, __self: this }, "Status"), /*#__PURE__*/ React.createElement("th", { className: "p-1.5 text-left border-b border-r border-gray-200 text-xs font-medium text-gray-600", __source: { fileName: "", lineNumber: 311, columnNumber: 17 }, __self: this }, "Notes"), /*#__PURE__*/ React.createElement("th", { className: "p-1.5 text-left border-b border-r border-gray-200 text-xs font-medium text-gray-600", __source: { fileName: "", lineNumber: 314, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center cursor-pointer", onClick: ()=>toggleSort("dateContacted"), __source: { fileName: "", lineNumber: 315, columnNumber: 19 }, __self: this }, "Date Contacted", sortField === "dateContacted" && /*#__PURE__*/ React.createElement("span", { className: "ml-1", __source: { fileName: "", lineNumber: 321, columnNumber: 23 }, __self: this }, sortDirection === "asc" ? "↑" : "↓"))), /*#__PURE__*/ React.createElement("th", { className: "p-1.5 text-left border-b border-r border-gray-200 text-xs font-medium text-gray-600", __source: { fileName: "", lineNumber: 327, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center cursor-pointer", onClick: ()=>toggleSort("followUpDate"), __source: { fileName: "", lineNumber: 328, columnNumber: 19 }, __self: this }, "Follow-up Date", sortField === "followUpDate" && /*#__PURE__*/ React.createElement("span", { className: "ml-1", __source: { fileName: "", lineNumber: 334, columnNumber: 23 }, __self: this }, sortDirection === "asc" ? "↑" : "↓"))), /*#__PURE__*/ React.createElement("th", { className: "p-1.5 text-center border-b border-gray-200 text-xs font-medium text-gray-600", __source: { fileName: "", lineNumber: 340, columnNumber: 17 }, __self: this }, "Actions"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 345, columnNumber: 13 }, __self: this }, sortedLinks.map((link)=>/*#__PURE__*/ React.createElement("tr", { key: link.id, className: `${hoveredRow === link.id ? "bg-blue-50" : "bg-white"} transition-colors duration-150`, onMouseEnter: ()=>setHoveredRow(link.id), onMouseLeave: ()=>setHoveredRow(null), __source: { fileName: "", lineNumber: 347, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-1.5 border-b border-r border-gray-200", __source: { fileName: "", lineNumber: 355, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: link.website, onChange: (e)=>updateCell(link.id, "website", e.target.value), className: "w-full p-1 bg-white text-gray-800 border border-gray-300 rounded-md text-sm shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500", __source: { fileName: "", lineNumber: 356, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-1.5 border-b border-r border-gray-200", __source: { fileName: "", lineNumber: 365, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: link.targetUrl, onChange: (e)=>updateCell(link.id, "targetUrl", e.target.value), className: "w-full p-1 bg-white text-gray-800 border border-gray-300 rounded-md text-sm shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500", __source: { fileName: "", lineNumber: 366, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-1.5 border-b border-r border-gray-200", __source: { fileName: "", lineNumber: 375, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: link.anchorText, onChange: (e)=>updateCell(link.id, "anchorText", e.target.value), className: "w-full p-1 bg-white text-gray-800 border border-gray-300 rounded-md text-sm shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500", __source: { fileName: "", lineNumber: 376, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-1.5 border-b border-r border-gray-200", __source: { fileName: "", lineNumber: 385, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: link.linkType, onChange: (e)=>updateCell(link.id, "linkType", e.target.value), className: "w-full p-1 bg-white text-gray-800 border border-gray-300 rounded-md text-sm shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500", __source: { fileName: "", lineNumber: 386, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "Dofollow", __source: { fileName: "", lineNumber: 393, columnNumber: 23 }, __self: this }, "Dofollow"), /*#__PURE__*/ React.createElement("option", { value: "Nofollow", __source: { fileName: "", lineNumber: 394, columnNumber: 23 }, __self: this }, "Nofollow"))), /*#__PURE__*/ React.createElement("td", { className: "p-1.5 border-b border-r border-gray-200", __source: { fileName: "", lineNumber: 397, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", value: link.contactEmail, onChange: (e)=>updateCell(link.id, "contactEmail", e.target.value), className: "w-full p-1 bg-white text-gray-800 border border-gray-300 rounded-md text-sm shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500", __source: { fileName: "", lineNumber: 398, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-1.5 border-b border-r border-gray-200", __source: { fileName: "", lineNumber: 407, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: link.status, onChange: (e)=>updateCell(link.id, "status", e.target.value), className: `w-full p-1 border rounded-md text-sm shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 ${link.status === "Live" ? "bg-green-50 text-green-800 border-green-200" : link.status === "Rejected" ? "bg-red-50 text-red-800 border-red-200" : link.status === "Replied" ? "bg-blue-50 text-blue-800 border-blue-200" : link.status === "Contacted" ? "bg-amber-50 text-amber-800 border-amber-200" : "bg-white text-gray-800 border-gray-300"}`, __source: { fileName: "", lineNumber: 408, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "Contacted", __source: { fileName: "", lineNumber: 425, columnNumber: 23 }, __self: this }, "Contacted"), /*#__PURE__*/ React.createElement("option", { value: "Replied", __source: { fileName: "", lineNumber: 426, columnNumber: 23 }, __self: this }, "Replied"), /*#__PURE__*/ React.createElement("option", { value: "Live", __source: { fileName: "", lineNumber: 427, columnNumber: 23 }, __self: this }, "Live"), /*#__PURE__*/ React.createElement("option", { value: "Rejected", __source: { fileName: "", lineNumber: 428, columnNumber: 23 }, __self: this }, "Rejected"), /*#__PURE__*/ React.createElement("option", { value: "No Response", __source: { fileName: "", lineNumber: 429, columnNumber: 23 }, __self: this }, "No Response"))), /*#__PURE__*/ React.createElement("td", { className: "p-1.5 border-b border-r border-gray-200", __source: { fileName: "", lineNumber: 432, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: link.notes, onChange: (e)=>updateCell(link.id, "notes", e.target.value), className: "w-full p-1 bg-white text-gray-800 border border-gray-300 rounded-md text-sm shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500", rows: "1", __source: { fileName: "", lineNumber: 433, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-1.5 border-b border-r border-gray-200", __source: { fileName: "", lineNumber: 442, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "date", value: link.dateContacted, onChange: (e)=>updateCell(link.id, "dateContacted", e.target.value), className: "w-full p-1 bg-white text-gray-800 border border-gray-300 rounded-md text-sm shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500", __source: { fileName: "", lineNumber: 443, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-1.5 border-b border-r border-gray-200", __source: { fileName: "", lineNumber: 452, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "date", value: link.followUpDate, onChange: (e)=>updateCell(link.id, "followUpDate", e.target.value), className: "w-full p-1 bg-white text-gray-800 border border-gray-300 rounded-md text-sm shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500", __source: { fileName: "", lineNumber: 453, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-1.5 border-b border-gray-200 text-center", __source: { fileName: "", lineNumber: 462, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>deleteRow(link.id), className: "px-2 py-1 bg-red-500 hover:bg-red-600 text-white rounded-md text-xs shadow-sm", __source: { fileName: "", lineNumber: 463, columnNumber: 21 }, __self: this }, "✕"))))))), sortedLinks.length === 0 && /*#__PURE__*/ React.createElement("div", { className: "text-center py-4 bg-white border border-gray-200 rounded-md mt-3", __source: { fileName: "", lineNumber: 477, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 478, columnNumber: 13 }, __self: this }, "No links found. Add a new row to get started!")))); }