function HeaderTabs({ active }) { const tabs = [ { name: "Overview", href: "/" }, { name: "Dashboard", href: "/dashboard" }, { name: "Measurements", href: "/measurements" }, { name: "Qualitative Analysis", href: "/qualitative" } ]; return /*#__PURE__*/ React.createElement("div", { className: "bg-black border-b border-[#00ff00]/20", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex justify-center", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-8", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, tabs.map((tab)=>{ const isActive = active === tab.name.toLowerCase(); return /*#__PURE__*/ React.createElement("a", { key: tab.name, href: tab.href, className: ` inline-flex items-center px-1 py-4 text-sm font-medium border-b-2 ${isActive ? "border-[#00ff00] text-[#00ff00]" : "border-transparent text-[#00ff00]/60 hover:text-[#00ff00] hover:border-[#00ff00]/30"} transition-colors duration-200 `, __source: { fileName: "", lineNumber: 17, columnNumber: 17 }, __self: this }, tab.name); }))))); } function HeaderTabsStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 mb-2", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "Overview Active"), /*#__PURE__*/ React.createElement(HeaderTabs, { active: "overview", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 mb-2", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "Dashboard Active"), /*#__PURE__*/ React.createElement(HeaderTabs, { active: "dashboard", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 mb-2", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "Measurements Active"), /*#__PURE__*/ React.createElement(HeaderTabs, { active: "measurements", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 mb-2", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "Qualitative Analysis Active"), /*#__PURE__*/ React.createElement(HeaderTabs, { active: "qualitative analysis", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 mb-2", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "Mobile View (Resize to see)"), /*#__PURE__*/ React.createElement("div", { className: "max-w-[375px] border border-gray-200", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(HeaderTabs, { active: "overview", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this })))); } function MainComponent() { const [measurements, setMeasurements] = useState(null); const [error, setError] = useState(null); const [loading, setLoading] = useState(true); const fetchMeasurements = useCallback(async ()=>{ try { const response = await fetch("/api/measurements/list", { method: "POST", body: JSON.stringify({ limit: 10, page: 1 }) }); if (!response.ok) { throw new Error("Failed to fetch measurements"); } const data = await response.json(); setMeasurements(data.measurements); } catch (err) { console.error(err); setError("Unable to load measurements"); } finally{ setLoading(false); } }, []); useEffect(()=>{ fetchMeasurements(); const interval = setInterval(fetchMeasurements, 30000); return ()=>clearInterval(interval); }, [ fetchMeasurements ]); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("head", { __source: { fileName: "", lineNumber: 37, 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: 38, 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: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto space-y-6 flex-grow", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between items-start md:items-center", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#00ff00]", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "System Dashboard"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mt-4 md:mt-0", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/measurements", className: "inline-flex items-center px-4 py-2 text-sm border border-[#00ff00]/20 rounded-md text-[#00ff00]/80 hover:bg-[#00ff00]/10 hover:text-[#00ff00]", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line mr-2", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }), "View All Measurements"), /*#__PURE__*/ React.createElement("a", { href: "/measurements", className: "inline-flex items-center px-4 py-2 text-sm bg-[#00ff00]/10 text-[#00ff00] rounded-md hover:bg-[#00ff00]/20", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus mr-2", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }), "New Measurement"))), /*#__PURE__*/ React.createElement(HeaderTabs, { active: "dashboard", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }), loading ? /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, [ ...Array.from({ length: 6 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "h-32 bg-[#00ff00]/5 animate-pulse rounded-lg border border-[#00ff00]/20", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }))) : error ? /*#__PURE__*/ React.createElement("div", { className: "bg-[#00ff00]/5 p-4 rounded-lg text-[#00ff00] border border-[#00ff00]/20", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }), error) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, measurements && measurements[0] && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "bg-black p-6 rounded-lg border border-[#00ff00]/20", __source: { fileName: "", lineNumber: 89, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium text-[#00ff00]/60 mb-2", __source: { fileName: "", lineNumber: 90, columnNumber: 23 }, __self: this }, "Current Elevation"), /*#__PURE__*/ React.createElement("div", { className: "flex items-baseline", __source: { fileName: "", lineNumber: 93, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-4xl font-bold text-[#00ff00]", __source: { fileName: "", lineNumber: 94, columnNumber: 25 }, __self: this }, measurements[0].elevation_height_meters), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-[#00ff00]/60", __source: { fileName: "", lineNumber: 97, columnNumber: 25 }, __self: this }, "meters"))), /*#__PURE__*/ React.createElement("div", { className: "bg-black p-6 rounded-lg border border-[#00ff00]/20", __source: { fileName: "", lineNumber: 100, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium text-[#00ff00]/60 mb-2", __source: { fileName: "", lineNumber: 101, columnNumber: 23 }, __self: this }, "System Status"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 104, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-3 h-3 rounded-full mr-2 ${measurements[0].operational_status === "active" ? "bg-[#00ff00]" : measurements[0].operational_status === "maintenance" ? "bg-[#00ff00]/60" : measurements[0].operational_status === "error" ? "bg-[#00ff00]/30" : "bg-[#00ff00]/10"}`, __source: { fileName: "", lineNumber: 105, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[#00ff00] capitalize", __source: { fileName: "", lineNumber: 117, columnNumber: 25 }, __self: this }, measurements[0].operational_status))), /*#__PURE__*/ React.createElement("div", { className: "bg-black p-6 rounded-lg border border-[#00ff00]/20", __source: { fileName: "", lineNumber: 122, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium text-[#00ff00]/60 mb-2", __source: { fileName: "", lineNumber: 123, columnNumber: 23 }, __self: this }, "Power Consumption"), /*#__PURE__*/ React.createElement("div", { className: "flex items-baseline", __source: { fileName: "", lineNumber: 126, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-4xl font-bold text-[#00ff00]", __source: { fileName: "", lineNumber: 127, columnNumber: 25 }, __self: this }, measurements[0].power_consumption_kwh), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-[#00ff00]/60", __source: { fileName: "", lineNumber: 130, columnNumber: 25 }, __self: this }, "kWh"))), /*#__PURE__*/ React.createElement("div", { className: "bg-black p-6 rounded-lg border border-[#00ff00]/20", __source: { fileName: "", lineNumber: 133, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium text-[#00ff00]/60 mb-2", __source: { fileName: "", lineNumber: 134, columnNumber: 23 }, __self: this }, "Temperature"), /*#__PURE__*/ React.createElement("div", { className: "flex items-baseline", __source: { fileName: "", lineNumber: 137, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-4xl font-bold text-[#00ff00]", __source: { fileName: "", lineNumber: 138, columnNumber: 25 }, __self: this }, measurements[0].temperature_celsius), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-[#00ff00]/60", __source: { fileName: "", lineNumber: 141, columnNumber: 25 }, __self: this }, "°C"))), /*#__PURE__*/ React.createElement("div", { className: "bg-black p-6 rounded-lg border border-[#00ff00]/20", __source: { fileName: "", lineNumber: 145, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium text-[#00ff00]/60 mb-2", __source: { fileName: "", lineNumber: 146, columnNumber: 23 }, __self: this }, "Hydraulic Pressure"), /*#__PURE__*/ React.createElement("div", { className: "flex items-baseline", __source: { fileName: "", lineNumber: 149, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-4xl font-bold text-[#00ff00]", __source: { fileName: "", lineNumber: 150, columnNumber: 25 }, __self: this }, measurements[0].hydraulic_pressure_psi), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-[#00ff00]/60", __source: { fileName: "", lineNumber: 153, columnNumber: 25 }, __self: this }, "PSI"))), /*#__PURE__*/ React.createElement("div", { className: "bg-black p-6 rounded-lg border border-[#00ff00]/20", __source: { fileName: "", lineNumber: 156, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium text-[#00ff00]/60 mb-2", __source: { fileName: "", lineNumber: 157, columnNumber: 23 }, __self: this }, "Humidity"), /*#__PURE__*/ React.createElement("div", { className: "flex items-baseline", __source: { fileName: "", lineNumber: 160, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-4xl font-bold text-[#00ff00]", __source: { fileName: "", lineNumber: 161, columnNumber: 25 }, __self: this }, measurements[0].humidity_percentage), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-[#00ff00]/60", __source: { fileName: "", lineNumber: 164, columnNumber: 25 }, __self: this }, "%"))))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 171, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-black p-6 rounded-lg border border-[#00ff00]/20", __source: { fileName: "", lineNumber: 172, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium text-[#00ff00]/60 mb-4", __source: { fileName: "", lineNumber: 173, columnNumber: 19 }, __self: this }, "Quick Access"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 176, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/inspections", className: "p-4 border border-[#00ff00]/20 rounded-lg hover:bg-[#00ff00]/10", __source: { fileName: "", lineNumber: 177, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clipboard-check text-xl text-[#00ff00] mb-2", __source: { fileName: "", lineNumber: 181, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#00ff00]/60", __source: { fileName: "", lineNumber: 182, columnNumber: 23 }, __self: this }, "Safety Inspections")), /*#__PURE__*/ React.createElement("a", { href: "/qualitative", className: "p-4 border border-[#00ff00]/20 rounded-lg hover:bg-[#00ff00]/10", __source: { fileName: "", lineNumber: 186, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-bar text-xl text-[#00ff00] mb-2", __source: { fileName: "", lineNumber: 190, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#00ff00]/60", __source: { fileName: "", lineNumber: 191, columnNumber: 23 }, __self: this }, "Analysis Reports")))), /*#__PURE__*/ React.createElement("div", { className: "bg-black p-6 rounded-lg border border-[#00ff00]/20", __source: { fileName: "", lineNumber: 198, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium text-[#00ff00]/60 mb-4", __source: { fileName: "", lineNumber: 199, columnNumber: 19 }, __self: this }, "System Information"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 202, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 203, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-[#00ff00]/60", __source: { fileName: "", lineNumber: 204, columnNumber: 23 }, __self: this }, "Last Update"), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-[#00ff00]", __source: { fileName: "", lineNumber: 207, columnNumber: 23 }, __self: this }, measurements && measurements[0] && new Date(measurements[0].timestamp).toLocaleString())), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 213, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-[#00ff00]/60", __source: { fileName: "", lineNumber: 214, columnNumber: 23 }, __self: this }, "Total Weight"), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-[#00ff00]", __source: { fileName: "", lineNumber: 217, columnNumber: 23 }, __self: this }, measurements && measurements[0] && `${(measurements[0].weight_distribution_front + measurements[0].weight_distribution_back).toLocaleString()} kg`))))))), /*#__PURE__*/ React.createElement("footer", { className: "mt-12 pt-6 border-t border-[#00ff00]/20", __source: { fileName: "", lineNumber: 229, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto text-center", __source: { fileName: "", lineNumber: 230, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#00ff00]/80 text-sm", __source: { fileName: "", lineNumber: 231, columnNumber: 13 }, __self: this }, "© ", new Date().getFullYear(), " Powered by", " ", /*#__PURE__*/ React.createElement("a", { href: "https://www.fivestarsappsolutions.com/", target: "_blank", rel: "noopener noreferrer", className: "text-[#00ff00] hover:text-[#00ff00]/80 transition-colors border-b border-[#00ff00]/20 hover:border-[#00ff00]", __source: { fileName: "", lineNumber: 233, columnNumber: 15 }, __self: this }, "Five Stars App Solutions AI Builder")))))); }