function MainComponent() { const now = new Date(); const [currentDate, setCurrentDate] = React.useState(now); const [showCalendar, setShowCalendar] = React.useState(false); const [entries, setEntries] = React.useState({}); const handleMenuClick = ()=>setShowCalendar(!showCalendar); const columns = [ "Titular do pagamento", "Financiado do caso", "Valor pago", "Descrição de pagamento" ]; const handleKeyDown = (e, rowIndex, colIndex)=>{ if (e.key === 'Enter') { const key = `${rowIndex}-${colIndex}`; setEntries({ ...entries, [key]: e.target.value }); } }; const dynamicDate = new Intl.DateTimeFormat('pt-BR', { dateStyle: 'full' }).format(currentDate); const dynamicTime = currentDate.toLocaleTimeString('pt-BR', { hour12: false }); React.useEffect(()=>{ const interval = setInterval(()=>{ setCurrentDate(new Date()); }, 1000); return ()=>clearInterval(interval); }, []); const updateValueAsCurrency = (e)=>{ const valueOnlyNumbers = e.target.value.replace(/\D/g, ''); if (valueOnlyNumbers === '') { e.target.value = ''; return; } const valueAsNumber = Number(valueOnlyNumbers) / 100; const formattedValue = valueAsNumber.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }); e.target.value = formattedValue; }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center p-4 bg-white", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "cursor-pointer", onClick: handleMenuClick, __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-1 bg-black mb-1", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-8 h-1 bg-black mb-1", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-8 h-1 bg-black", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this })), showCalendar && /*#__PURE__*/ React.createElement("input", { type: "date", name: "date", className: "absolute top-16 left-0 mt-2", value: currentDate.toISOString().slice(0, 10), onChange: (e)=>setCurrentDate(new Date(e.target.value)), onBlur: ()=>setShowCalendar(false), __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center font-roboto font-semibold", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Saldo Total:"), /*#__PURE__*/ React.createElement("p", { className: "text-center font-roboto", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "R$ 0,00")), /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-right", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, dynamicDate), /*#__PURE__*/ React.createElement("p", { className: "text-right", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, dynamicTime))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex text-white bg-[#191970]", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, columns.map((column, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-3 flex-1 border-r border-black last:border-r-0`, __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, column))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-auto", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, Array.from({ length: 500 }).fill(null).map((_, rowIndex)=>/*#__PURE__*/ React.createElement("div", { key: rowIndex, className: `flex ${rowIndex % 2 === 0 ? 'bg-[#87CEEB]' : 'bg-white'}`, __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, columns.map((_, colIndex)=>/*#__PURE__*/ React.createElement("input", { key: colIndex, name: colIndex === 0 ? `payer-${rowIndex}` : colIndex === 1 ? `caseSponsored-${rowIndex}` : colIndex === 2 ? `paidValue-${rowIndex}` : `paymentDescription-${rowIndex}`, type: colIndex === 2 ? "text" : "text", className: `p-3 flex-1 border-r border-black last:border-r-0 bg-transparent text-black`, maxLength: 150, onChange: colIndex === 2 ? updateValueAsCurrency : undefined, onKeyDown: (e)=>handleKeyDown(e, rowIndex, colIndex), value: entries[`${rowIndex}-${colIndex}`] || '', __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }))))))); }