function MainComponent() { const [measurements, setMeasurements] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [page, setPage] = useState(1); const [totalPages, setTotalPages] = useState(1); const [formData, setFormData] = useState({ elevation_height_meters: "", hydraulic_pressure_psi: "", temperature_celsius: "", humidity_percentage: "", weight_distribution_front: "", weight_distribution_back: "", power_consumption_kwh: "", operational_status: "active" }); const fetchMeasurements = async ()=>{ try { setLoading(true); const response = await fetch("/api/measurements/list", { method: "POST", body: JSON.stringify({ page, limit: 10, startDate: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString(), endDate: new Date().toISOString() }) }); if (!response.ok) { throw new Error("Failed to fetch measurements"); } const data = await response.json(); setMeasurements(data.measurements); setTotalPages(data.pagination.totalPages); } catch (err) { setError(err.message); console.error(err); } finally{ setLoading(false); } }; useEffect(()=>{ fetchMeasurements(); }, [ page ]); const handleSubmit = async (e)=>{ e.preventDefault(); try { const response = await fetch("/api/measurements/create", { method: "POST", body: JSON.stringify({ ...formData, elevation_height_meters: Number(formData.elevation_height_meters), hydraulic_pressure_psi: Number(formData.hydraulic_pressure_psi), temperature_celsius: Number(formData.temperature_celsius), humidity_percentage: Number(formData.humidity_percentage), weight_distribution_front: Number(formData.weight_distribution_front), weight_distribution_back: Number(formData.weight_distribution_back), power_consumption_kwh: Number(formData.power_consumption_kwh) }) }); if (!response.ok) { throw new Error("Failed to create measurement"); } setFormData({ elevation_height_meters: "", hydraulic_pressure_psi: "", temperature_celsius: "", humidity_percentage: "", weight_distribution_front: "", weight_distribution_back: "", power_consumption_kwh: "", operational_status: "active" }); fetchMeasurements(); } catch (err) { setError(err.message); console.error(err); } }; const handleExport = ()=>{ const csv = [ [ "Timestamp", "Elevation (m)", "Pressure (psi)", "Temperature (°C)", "Humidity (%)", "Front Weight", "Back Weight", "Power (kWh)", "Status" ], ...measurements.map((m)=>[ new Date(m.timestamp).toLocaleString(), m.elevation_height_meters, m.hydraulic_pressure_psi, m.temperature_celsius, m.humidity_percentage, m.weight_distribution_front, m.weight_distribution_back, m.power_consumption_kwh, m.operational_status ]) ].map((row)=>row.join(",")).join("\n"); const blob = new Blob([ csv ], { type: "text/csv" }); const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `measurements-${new Date().toISOString()}.csv`; document.body.appendChild(a); a.click(); document.body.removeChild(a); window.URL.revokeObjectURL(url); }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("head", { __source: { fileName: "", lineNumber: 130, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("link", { rel: "icon", type: "image/gif", href: "https://ucarecdn.com/08e443f6-92dc-4245-bbad-d68134ed72db/", __source: { fileName: "", lineNumber: 131, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-black p-4 md:p-8 flex flex-col", __source: { fileName: "", lineNumber: 137, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto flex-grow w-full", __source: { fileName: "", lineNumber: 138, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#00ff00] mb-8", __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this }, "Measurements"), /*#__PURE__*/ React.createElement("div", { className: "bg-black border border-[#00ff00]/20 rounded-lg p-6 mb-8", __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-[#00ff00] mb-6", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, "New Measurement"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 151, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#00ff00]/80 mb-1", __source: { fileName: "", lineNumber: 152, columnNumber: 17 }, __self: this }, "Elevation (m)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "elevation_height_meters", value: formData.elevation_height_meters, onChange: (e)=>setFormData({ ...formData, elevation_height_meters: e.target.value }), className: "w-full rounded bg-black border border-[#00ff00]/20 text-[#00ff00] focus:border-[#00ff00] focus:ring-1 focus:ring-[#00ff00]", required: true, min: "0", max: "100", __source: { fileName: "", lineNumber: 155, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 171, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#00ff00]/80 mb-1", __source: { fileName: "", lineNumber: 172, columnNumber: 17 }, __self: this }, "Hydraulic Pressure (psi)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "hydraulic_pressure_psi", value: formData.hydraulic_pressure_psi, onChange: (e)=>setFormData({ ...formData, hydraulic_pressure_psi: e.target.value }), className: "w-full rounded bg-black border border-[#00ff00]/20 text-[#00ff00] focus:border-[#00ff00] focus:ring-1 focus:ring-[#00ff00]", required: true, min: "0", max: "10000", __source: { fileName: "", lineNumber: 175, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 191, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#00ff00]/80 mb-1", __source: { fileName: "", lineNumber: 192, columnNumber: 17 }, __self: this }, "Temperature (°C)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "temperature_celsius", value: formData.temperature_celsius, onChange: (e)=>setFormData({ ...formData, temperature_celsius: e.target.value }), className: "w-full rounded bg-black border border-[#00ff00]/20 text-[#00ff00] focus:border-[#00ff00] focus:ring-1 focus:ring-[#00ff00]", required: true, min: "-50", max: "100", __source: { fileName: "", lineNumber: 195, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 211, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#00ff00]/80 mb-1", __source: { fileName: "", lineNumber: 212, columnNumber: 17 }, __self: this }, "Humidity (%)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "humidity_percentage", value: formData.humidity_percentage, onChange: (e)=>setFormData({ ...formData, humidity_percentage: e.target.value }), className: "w-full rounded bg-black border border-[#00ff00]/20 text-[#00ff00] focus:border-[#00ff00] focus:ring-1 focus:ring-[#00ff00]", required: true, min: "0", max: "100", __source: { fileName: "", lineNumber: 215, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 231, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#00ff00]/80 mb-1", __source: { fileName: "", lineNumber: 232, columnNumber: 17 }, __self: this }, "Front Weight Distribution"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "weight_distribution_front", value: formData.weight_distribution_front, onChange: (e)=>setFormData({ ...formData, weight_distribution_front: e.target.value }), className: "w-full rounded bg-black border border-[#00ff00]/20 text-[#00ff00] focus:border-[#00ff00] focus:ring-1 focus:ring-[#00ff00]", required: true, min: "0", max: "100000", __source: { fileName: "", lineNumber: 235, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 251, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#00ff00]/80 mb-1", __source: { fileName: "", lineNumber: 252, columnNumber: 17 }, __self: this }, "Back Weight Distribution"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "weight_distribution_back", value: formData.weight_distribution_back, onChange: (e)=>setFormData({ ...formData, weight_distribution_back: e.target.value }), className: "w-full rounded bg-black border border-[#00ff00]/20 text-[#00ff00] focus:border-[#00ff00] focus:ring-1 focus:ring-[#00ff00]", required: true, min: "0", max: "100000", __source: { fileName: "", lineNumber: 255, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 272, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#00ff00]/80 mb-1", __source: { fileName: "", lineNumber: 273, columnNumber: 17 }, __self: this }, "Power Consumption (kWh)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "power_consumption_kwh", value: formData.power_consumption_kwh, onChange: (e)=>setFormData({ ...formData, power_consumption_kwh: e.target.value }), className: "w-full rounded bg-black border border-[#00ff00]/20 text-[#00ff00] focus:border-[#00ff00] focus:ring-1 focus:ring-[#00ff00]", required: true, min: "0", max: "10000", __source: { fileName: "", lineNumber: 276, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 292, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#00ff00]/80 mb-1", __source: { fileName: "", lineNumber: 293, columnNumber: 17 }, __self: this }, "Operational Status"), /*#__PURE__*/ React.createElement("select", { name: "operational_status", value: formData.operational_status, onChange: (e)=>setFormData({ ...formData, operational_status: e.target.value }), className: "w-full rounded bg-black border border-[#00ff00]/20 text-[#00ff00] focus:border-[#00ff00] focus:ring-1 focus:ring-[#00ff00]", required: true, __source: { fileName: "", lineNumber: 296, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "active", __source: { fileName: "", lineNumber: 308, columnNumber: 19 }, __self: this }, "Active"), /*#__PURE__*/ React.createElement("option", { value: "maintenance", __source: { fileName: "", lineNumber: 309, columnNumber: 19 }, __self: this }, "Maintenance"), /*#__PURE__*/ React.createElement("option", { value: "inactive", __source: { fileName: "", lineNumber: 310, columnNumber: 19 }, __self: this }, "Inactive"), /*#__PURE__*/ React.createElement("option", { value: "error", __source: { fileName: "", lineNumber: 311, columnNumber: 19 }, __self: this }, "Error"))), /*#__PURE__*/ React.createElement("div", { className: "md:col-span-2 lg:col-span-4 flex justify-end", __source: { fileName: "", lineNumber: 314, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-[#00ff00]/10 border border-[#00ff00] text-[#00ff00] rounded hover:bg-[#00ff00]/20 transition-colors", __source: { fileName: "", lineNumber: 315, columnNumber: 17 }, __self: this }, "Add Measurement")))), /*#__PURE__*/ React.createElement("div", { className: "bg-black border border-[#00ff00]/20 rounded-lg p-6 mb-8", __source: { fileName: "", lineNumber: 325, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 326, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-[#00ff00]", __source: { fileName: "", lineNumber: 327, columnNumber: 15 }, __self: this }, "Historical Measurements"), /*#__PURE__*/ React.createElement("button", { onClick: handleExport, className: "px-4 py-2 border border-[#00ff00] text-[#00ff00] rounded hover:bg-[#00ff00]/20 transition-colors", __source: { fileName: "", lineNumber: 330, columnNumber: 15 }, __self: this }, "Export CSV")), loading ? /*#__PURE__*/ React.createElement("div", { className: "animate-pulse space-y-4", __source: { fileName: "", lineNumber: 339, columnNumber: 15 }, __self: this }, [ ...Array.from({ length: 5 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "h-12 bg-[#00ff00]/10 rounded", __source: { fileName: "", lineNumber: 341, columnNumber: 19 }, __self: this }))) : error ? /*#__PURE__*/ React.createElement("div", { className: "text-[#ff0000] text-center py-8", __source: { fileName: "", lineNumber: 345, columnNumber: 15 }, __self: this }, error) : measurements.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-[#00ff00]/60 text-center py-8", __source: { fileName: "", lineNumber: 347, columnNumber: 15 }, __self: this }, "No measurements recorded yet") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 352, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full", __source: { fileName: "", lineNumber: 353, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 354, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "border-b border-[#00ff00]/20", __source: { fileName: "", lineNumber: 355, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "py-3 text-left text-sm font-medium text-[#00ff00]/60", __source: { fileName: "", lineNumber: 356, columnNumber: 25 }, __self: this }, "Timestamp"), /*#__PURE__*/ React.createElement("th", { className: "py-3 text-left text-sm font-medium text-[#00ff00]/60", __source: { fileName: "", lineNumber: 359, columnNumber: 25 }, __self: this }, "Elevation"), /*#__PURE__*/ React.createElement("th", { className: "py-3 text-left text-sm font-medium text-[#00ff00]/60", __source: { fileName: "", lineNumber: 362, columnNumber: 25 }, __self: this }, "Pressure"), /*#__PURE__*/ React.createElement("th", { className: "py-3 text-left text-sm font-medium text-[#00ff00]/60", __source: { fileName: "", lineNumber: 365, columnNumber: 25 }, __self: this }, "Temperature"), /*#__PURE__*/ React.createElement("th", { className: "py-3 text-left text-sm font-medium text-[#00ff00]/60", __source: { fileName: "", lineNumber: 368, columnNumber: 25 }, __self: this }, "Humidity"), /*#__PURE__*/ React.createElement("th", { className: "py-3 text-left text-sm font-medium text-[#00ff00]/60", __source: { fileName: "", lineNumber: 371, columnNumber: 25 }, __self: this }, "Status"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 376, columnNumber: 21 }, __self: this }, measurements.map((measurement, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "border-b border-[#00ff00]/20", __source: { fileName: "", lineNumber: 378, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "py-4 text-sm text-[#00ff00]", __source: { fileName: "", lineNumber: 382, columnNumber: 27 }, __self: this }, new Date(measurement.timestamp).toLocaleString()), /*#__PURE__*/ React.createElement("td", { className: "py-4 text-sm text-[#00ff00]", __source: { fileName: "", lineNumber: 385, columnNumber: 27 }, __self: this }, measurement.elevation_height_meters, "m"), /*#__PURE__*/ React.createElement("td", { className: "py-4 text-sm text-[#00ff00]", __source: { fileName: "", lineNumber: 388, columnNumber: 27 }, __self: this }, measurement.hydraulic_pressure_psi, " psi"), /*#__PURE__*/ React.createElement("td", { className: "py-4 text-sm text-[#00ff00]", __source: { fileName: "", lineNumber: 391, columnNumber: 27 }, __self: this }, measurement.temperature_celsius, "°C"), /*#__PURE__*/ React.createElement("td", { className: "py-4 text-sm text-[#00ff00]", __source: { fileName: "", lineNumber: 394, columnNumber: 27 }, __self: this }, measurement.humidity_percentage, "%"), /*#__PURE__*/ React.createElement("td", { className: "py-4 text-sm", __source: { fileName: "", lineNumber: 397, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `px-2 py-1 rounded ${measurement.operational_status === "active" ? "bg-[#00ff00]/20 text-[#00ff00]" : measurement.operational_status === "maintenance" ? "bg-[#ffff00]/20 text-[#ffff00]" : measurement.operational_status === "error" ? "bg-[#ff0000]/20 text-[#ff0000]" : "bg-[#00ff00]/10 text-[#00ff00]"}`, __source: { fileName: "", lineNumber: 398, columnNumber: 29 }, __self: this }, measurement.operational_status.charAt(0).toUpperCase() + measurement.operational_status.slice(1)))))))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex justify-center", __source: { fileName: "", lineNumber: 422, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 423, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setPage((p)=>Math.max(1, p - 1)), disabled: page === 1, className: "px-3 py-1 rounded border border-[#00ff00] text-[#00ff00] disabled:opacity-50 hover:bg-[#00ff00]/20 transition-colors", __source: { fileName: "", lineNumber: 424, columnNumber: 21 }, __self: this }, "Previous"), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-[#00ff00]", __source: { fileName: "", lineNumber: 431, columnNumber: 21 }, __self: this }, "Page ", page, " of ", totalPages), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setPage((p)=>Math.min(totalPages, p + 1)), disabled: page === totalPages, className: "px-3 py-1 rounded border border-[#00ff00] text-[#00ff00] disabled:opacity-50 hover:bg-[#00ff00]/20 transition-colors", __source: { fileName: "", lineNumber: 434, columnNumber: 21 }, __self: this }, "Next")))))), /*#__PURE__*/ React.createElement("footer", { className: "border-t border-[#00ff00]/20 mt-8 py-8", __source: { fileName: "", lineNumber: 450, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center", __source: { fileName: "", lineNumber: 451, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#00ff00]/60 mb-4 md:mb-0", __source: { fileName: "", lineNumber: 452, columnNumber: 13 }, __self: this }, "© 2025 Underground Vault Analysis System"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-6", __source: { fileName: "", lineNumber: 455, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-[#00ff00]/60 hover:text-[#00ff00]", __source: { fileName: "", lineNumber: 456, columnNumber: 15 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "/dashboard", className: "text-[#00ff00]/60 hover:text-[#00ff00]", __source: { fileName: "", lineNumber: 459, columnNumber: 15 }, __self: this }, "Dashboard"), /*#__PURE__*/ React.createElement("a", { href: "/measurements", className: "text-[#00ff00]/60 hover:text-[#00ff00]", __source: { fileName: "", lineNumber: 465, columnNumber: 15 }, __self: this }, "Measurements"), /*#__PURE__*/ React.createElement("a", { href: "/inspections", className: "text-[#00ff00]/60 hover:text-[#00ff00]", __source: { fileName: "", lineNumber: 471, columnNumber: 15 }, __self: this }, "Inspections")))))); }