function MainComponent() { const [startDate, setStartDate] = React.useState(''); const [endDate, setEndDate] = React.useState(''); const [hours, setHours] = React.useState(0); const [timeZone, setTimeZone] = React.useState(Intl.DateTimeFormat().resolvedOptions().timeZone); const [timeZonesList] = React.useState(Intl.supportedValuesOf('timeZone')); const [entries, setEntries] = React.useState([]); const [speechLoading, setSpeechLoading] = React.useState(false); const handleStartDateChange = (e)=>{ setStartDate(e.target.value); }; const handleEndDateChange = (e)=>{ setEndDate(e.target.value); }; React.useEffect(()=>{ if (startDate && endDate) { const startTime = new Date(startDate); const endTime = new Date(endDate); setHours(((endTime - startTime) / (1000 * 60 * 60)).toFixed(2)); } }, [ startDate, endDate ]); const handleTimeZoneChange = (e)=>{ setTimeZone(e.target.value); }; const handleSaveEntry = async ()=>{ try { if (startDate && endDate && hours) { const newEntry = { startDate, endDate, hours, timeZone }; setEntries((prevEntries)=>[ ...prevEntries, newEntry ]); localStorage.setItem('entries', JSON.stringify([ ...entries, newEntry ])); setSpeechLoading(true); const response = await fetch('/integrations/text-to-speech/speech?text=' + encodeURIComponent('New timesheet entry saved.'), { method: 'GET' }); setSpeechLoading(false); if (response.ok) { const audioUrl = URL.createObjectURL(await response.blob()); const audio = new Audio(audioUrl); audio.play(); } else { throw new Error('Failed to convert text to speech'); } } } catch (error) { console.error(error); setSpeechLoading(false); } }; React.useEffect(()=>{ const savedEntries = localStorage.getItem('entries'); if (savedEntries) { setEntries(JSON.parse(savedEntries)); } }, []); const entryGroups = entries.reduce((groups, entry)=>{ const date = entry.startDate.split('T')[0]; if (!groups[date]) { groups[date] = []; } groups[date].push(entry); return groups; }, {}); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F5F5F5] p-4 font-roboto", __source: { fileName: "", lineNumber: 73, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl bg-white shadow-md overflow-hidden", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl mb-2 text-[#424242]", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "Timesheet Management"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#757575] text-sm mb-2", htmlFor: "start-date", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "Start Date and Time"), /*#__PURE__*/ React.createElement("input", { type: "datetime-local", id: "start-date", name: "start-date", value: startDate, className: "block w-full text-[#757575] border border-[#BDBDBD] rounded py-2 px-3 mb-3 leading-tight focus:outline-none focus:bg-white", onChange: handleStartDateChange, __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#757575] text-sm mb-2", htmlFor: "end-date", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, "End Date and Time"), /*#__PURE__*/ React.createElement("input", { type: "datetime-local", id: "end-date", name: "end-date", value: endDate, className: "block w-full text-[#757575] border border-[#BDBDBD] rounded py-2 px-3 mb-3 leading-tight focus:outline-none focus:bg-white", onChange: handleEndDateChange, __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#757575] text-sm mb-2", htmlFor: "time-zone", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, "Time Zone"), /*#__PURE__*/ React.createElement("select", { id: "timezone", name: "timezone", value: timeZone, className: "block w-full text-[#757575] border border-[#BDBDBD] rounded py-2 px-3 mb-3 leading-tight focus:outline-none focus:bg-white", onChange: handleTimeZoneChange, __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, timeZonesList.map((tz)=>/*#__PURE__*/ React.createElement("option", { key: tz, value: tz, __source: { fileName: "", lineNumber: 115, columnNumber: 17 }, __self: this }, tz)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#757575] text-sm mb-2", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, "Hours Worked"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "hours-worked", value: hours + ' hours', className: "block w-full text-[#757575] border border-[#BDBDBD] rounded py-2 px-3 mb-3 leading-tight focus:outline-none focus:bg-white", readOnly: true, __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `w-full bg-[#2196F3] hover:bg-[#1976D2] text-white font-bold py-2 px-4 ${speechLoading ? 'opacity-50 cursor-not-allowed' : ''}`, type: "button", onClick: handleSaveEntry, disabled: speechLoading, __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, speechLoading ? 'Processing...' : 'Save Entry'))), /*#__PURE__*/ React.createElement("div", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 141, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg text-[#424242] font-bold", __source: { fileName: "", lineNumber: 142, columnNumber: 11 }, __self: this }, "Saved Entries"), /*#__PURE__*/ React.createElement("div", { className: "mt-4 space-y-4", __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }, Object.keys(entryGroups).map((date)=>/*#__PURE__*/ React.createElement("div", { key: date, className: "mb-2", __source: { fileName: "", lineNumber: 145, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#1976D2] font-bold", __source: { fileName: "", lineNumber: 146, columnNumber: 17 }, __self: this }, date), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 147, columnNumber: 17 }, __self: this }, entryGroups[date].map((entry, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex w-full sm:w-1/2 md:w-1/3 bg-[#E3F2FD] border border-[#BDBDBD] p-4 shadow-sm", __source: { fileName: "", lineNumber: 149, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-grow", __source: { fileName: "", lineNumber: 150, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 151, columnNumber: 25 }, __self: this }, "Start: ", entry.startDate.split('T')[1]), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 152, columnNumber: 25 }, __self: this }, "End: ", entry.endDate.split('T')[1]), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 153, columnNumber: 25 }, __self: this }, entry.hours, " hours"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 154, columnNumber: 25 }, __self: this }, "Time Zone: ", entry.timeZone)), /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0 pl-4", __source: { fileName: "", lineNumber: 156, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-[#1976D2] hover:text-[#0D47A1]", __source: { fileName: "", lineNumber: 157, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-edit", __source: { fileName: "", lineNumber: 158, columnNumber: 27 }, __self: this })))))))))))); }