function SalesforceCsvUploader({ onFileSelected }) { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "file-upload", className: "cursor-pointer bg-[#007bff] text-white font-roboto p-2 rounded-md", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "Upload CSV"), /*#__PURE__*/ React.createElement("input", { id: "file-upload", type: "file", name: "salesforceLostOpportunityNotes", className: "hidden", accept: ".csv", onChange: onFileSelected, __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this })); } function SalesforceCsvUploaderStory() { const [fileName, setFileName] = React.useState(''); const handleFileSelected = (event)=>{ const file = event.target.files[0]; if (file) { setFileName(file.name); } }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SalesforceCsvUploader, { onFileSelected: handleFileSelected, __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }), fileName && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-[#28a745] font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 20 }, __self: this }, "Confirmation: ", fileName, " uploaded successfully")); } function MainComponent() { const [file, setFile] = React.useState(null); const [analysisResult, setAnalysisResult] = React.useState([]); const [uploadProgress, setUploadProgress] = React.useState(0); const [isAnalyzing, setIsAnalyzing] = React.useState(false); const handleFileSelected = (event)=>{ setFile(event.target.files[0]); setUploadProgress(0); }; const handleSubmit = async (event)=>{ event.preventDefault(); setIsAnalyzing(true); const formData = new FormData(); formData.append('file', file); let progress = 0; const interval = setInterval(()=>{ progress += 10; setUploadProgress(progress); if (progress >= 100) { clearInterval(interval); setAnalysisResult([ { opportunityId: '001', notes: 'Note for 001', label: 'Category 1' }, { opportunityId: '002', notes: 'Note for 002', label: 'Category 2' }, { opportunityId: '003', notes: 'Note for 003', label: 'Category 3' } ]); setIsAnalyzing(false); } }, 100); }; const chartData = analysisResult.reduce((acc, curr)=>{ acc[curr.label] = (acc[curr.label] || 0) + 1; return acc; }, {}); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto mb-8", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, "Salesforce Lost Opportunity Analyzer"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col items-center bg-white p-8 rounded shadow", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(SalesforceCsvUploader, { onFileSelected: handleFileSelected, __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }), uploadProgress > 0 && uploadProgress < 100 && /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700", __source: { fileName: "", lineNumber: 44, columnNumber: 56 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-600 h-2.5 rounded-full", style: { width: `${uploadProgress}%` }, __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "Analyze")), isAnalyzing && /*#__PURE__*/ React.createElement("div", { className: "mt-4 font-roboto", __source: { fileName: "", lineNumber: 49, columnNumber: 23 }, __self: this }, "Analyzing..."), !isAnalyzing && analysisResult.length > 0 && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "Label Distribution"), /*#__PURE__*/ React.createElement("div", { className: "flex w-full overflow-auto", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, Object.entries(chartData).map(([label, count], index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex flex-col items-center mr-4", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-20 h-20 bg-gray-200 flex items-center justify-center mb-2", __source: { fileName: "", lineNumber: 57, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 58, columnNumber: 21 }, __self: this }, count)), /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 60, columnNumber: 19 }, __self: this }, label))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 w-full px-4", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "Analysis Result"), /*#__PURE__*/ React.createElement("div", { className: "overflow-auto", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-100", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-6 py-2 text-left text-gray-600", __source: { fileName: "", lineNumber: 71, columnNumber: 21 }, __self: this }, "Opportunity ID"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-2 text-left text-gray-600", __source: { fileName: "", lineNumber: 72, columnNumber: 21 }, __self: this }, "Notes"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-2 text-left text-gray-600", __source: { fileName: "", lineNumber: 73, columnNumber: 21 }, __self: this }, "Label"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, analysisResult.map(({ opportunityId, notes, label })=>/*#__PURE__*/ React.createElement("tr", { key: opportunityId, className: "border-b", __source: { fileName: "", lineNumber: 78, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-6 py-2", __source: { fileName: "", lineNumber: 79, columnNumber: 23 }, __self: this }, opportunityId), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-2", __source: { fileName: "", lineNumber: 80, columnNumber: 23 }, __self: this }, notes), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-2", __source: { fileName: "", lineNumber: 81, columnNumber: 23 }, __self: this }, label))))))))); }