function MainComponent() { const [jobs, setJobs] = React.useState([]); const [takenJobs, setTakenJobs] = React.useState([]); const [selectedJob, setSelectedJob] = React.useState(null); const takeJob = (jobId)=>{ const newJobs = jobs.filter((job)=>job.id !== jobId); const takenJob = jobs.find((job)=>job.id === jobId); setJobs(newJobs); setTakenJobs([ ...takenJobs, takenJob ]); setSelectedJob(null); }; const cancelJob = (jobId)=>{ const currentJobs = takenJobs.filter((job)=>job.id !== jobId); const cancelledJob = takenJobs.find((job)=>job.id === jobId); setJobs([ ...jobs, cancelledJob ]); setTakenJobs(currentJobs); }; const handleJobSelect = (job)=>{ setSelectedJob(job); }; const displayedJobDetails = selectedJob && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center p-4", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md p-4 rounded-lg max-w-lg w-full", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold font-roboto text-[#2d3748]", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, selectedJob.title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#718096] my-2", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, selectedJob.description), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#4a5568]", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "Location: ", selectedJob.location), /*#__PURE__*/ React.createElement("button", { onClick: ()=>takeJob(selectedJob.id), className: "py-1 px-3 bg-[#319795] text-white text-sm rounded hover:bg-[#2c7a7b] font-roboto mt-4", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "Take Job"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedJob(null), className: "py-1 px-3 bg-[#e53e3e] text-white text-sm rounded hover:bg-[#c53030] font-roboto ml-2 mt-4", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "Close"))); const availableJobsSection = jobs.map((job)=>/*#__PURE__*/ React.createElement("div", { key: job.id, className: "cursor-pointer", onClick: ()=>handleJobSelect(job), __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold font-roboto text-[#2d3748]", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, job.title), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm text-[#4a5568]", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, "Location: ", job.location))); const markerStyle = { position: 'absolute', width: '30px', height: '30px', backgroundColor: 'blue', borderRadius: '50%', transform: 'translate(-50%, -50%)' }; const mapJobs = jobs.map((job, index)=>/*#__PURE__*/ React.createElement("div", { key: job.id, style: { top: job.coordinates[0], left: job.coordinates[1], ...markerStyle }, __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this })); const yourJobsSection = takenJobs.map((job)=>/*#__PURE__*/ React.createElement("div", { key: job.id, className: "flex items-center justify-between bg-white shadow-md p-4 rounded-lg mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold font-roboto text-[#2d3748]", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, job.title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#718096]", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "Scheduled for ", job.scheduledDate)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>cancelJob(job.id), className: "py-1 px-3 bg-[#e53e3e] text-white text-sm rounded hover:bg-[#c53030] font-roboto", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, "Cancel Job"))); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 80, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#1f2937] p-4 text-white", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, "JunkClear - Contractor Dashboard")), /*#__PURE__*/ React.createElement("main", { className: "relative p-4", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-6", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto mb-4 text-[#3d4852]", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "Available Jobs"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, selectedJob ? displayedJobDetails : availableJobsSection), /*#__PURE__*/ React.createElement("div", { className: "relative h-[300px] mt-4 bg-gray-300 rounded-lg", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, mapJobs)), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto mb-4 text-[#3d4852]", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, "Your Jobs"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, yourJobsSection))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#1f2937] p-4 text-white text-center", __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, "© 2023 JunkClear"))); }