function MainComponent() { const [logs, setLogs] = React.useState([]); const fetchLogs = async ()=>{ try { const response = await fetch('/api/logs'); const data = await response.json(); if (Array.isArray(data)) { setLogs(data); } } catch (error) { console.error('Failed to fetch logs:', error); } }; React.useEffect(()=>{ fetchLogs(); const interval = setInterval(fetchLogs, 5000); // Fetch logs every 5 seconds return ()=>clearInterval(interval); }, []); const logsList = logs.map((log, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-3 border-b border-gray-200", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-gray-700 break-all", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, log.message), /*#__PURE__*/ React.createElement("p", { className: "text-xs font-roboto text-gray-500", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, new Date(log.timestamp).toLocaleString())), log.id && /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-xs text-blue-600 hover:underline", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Details")))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen p-4 bg-[#f0f2f5]", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-semibold text-[#121212]", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "OCPP Log Stream Dashboard")), /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-auto p-2 bg-white shadow rounded-lg", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, logsList.length > 0 ? logsList : /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-full", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto text-gray-500", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "No logs available.")))); }