🌿 PlantCare — Smart Plant Monitor

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_275":276,"_277":278},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_207":-5,"_20":208,"_22":209,"_210":211,"_212":213,"_26":214,"_24":215,"_216":-5,"_217":-5,"_218":68,"_219":220,"_221":63,"_222":-5,"_223":-5,"_224":225},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","shalini","name","plant-health-monitor","branchName","main","version","path","frontend/index.html","project",{"_33":150,"_13":14,"_46":151,"_152":-5,"_153":68,"_154":155,"_156":155,"_157":158,"_159":-5,"_160":161,"_162":-5,"_163":68,"_164":-5,"_165":-5,"_166":43,"_167":168,"_169":170,"_171":172,"_173":174,"_175":-5,"_176":177,"_178":177,"_179":180,"_181":180,"_182":180,"_183":177,"_184":177,"_185":186,"_187":188,"_189":190,"_191":68},"tree",[53,54,55,56,57],"file",{"_33":34,"_35":36,"_37":38,"_13":39,"_40":41,"_42":24,"_17":43,"_44":45,"_46":47,"_48":49,"_50":-5,"_18":51},"contents",[],"upstream","pull","ahead","behind","envVars","id","157698ae-2dad-11f1-ad08-42dde27851f2","branchId","dc9fb010-2dac-11f1-b5c0-42dde27851f2","fileId","157699a8-2dad-11f1-ad08-42dde27851f2","index.html","content","\n\n\n \n \n 🌿 PlantCare — Smart Plant Monitor\n \n \n \n \n\n\n

\n \n\n\n","fileType",0,"parentId","e7b02cfa-2dac-11f1-b5c0-42dde27851f2","createdAt",["D",1775035683776],"branchVersion",8,"label",[52,39],"frontend",{"_33":125,"_13":126,"_37":127,"_44":-5,"_35":36,"_48":128,"_62":63,"_46":129,"_17":43,"_42":85,"_40":-5,"_67":68,"_50":-5,"_69":130,"_18":131},{"_33":98,"_13":52,"_37":45,"_44":-5,"_35":36,"_48":99,"_62":63,"_46":100,"_17":43,"_42":85,"_40":-5,"_67":68,"_50":-5,"_69":101,"_18":102},{"_33":80,"_13":81,"_37":82,"_44":-5,"_35":36,"_48":83,"_62":63,"_46":84,"_17":43,"_42":85,"_40":-5,"_67":68,"_50":-5,"_69":86,"_18":87},{"_33":72,"_13":73,"_37":74,"_44":-5,"_35":36,"_48":75,"_62":63,"_46":76,"_17":43,"_42":24,"_40":77,"_67":68,"_50":-5,"_69":78,"_18":79},{"_33":58,"_13":59,"_37":60,"_44":-5,"_35":36,"_48":61,"_62":63,"_46":64,"_17":43,"_42":65,"_40":66,"_67":68,"_50":-5,"_69":70,"_18":71},"dca266b6-2dac-11f1-b5c0-42dde27851f2","main.ts","dca26792-2dac-11f1-b5c0-42dde27851f2",1,"latest",true,["D",1775035588438],"http","export { default } from \"./backend/index.ts\";\n","deleted",false,"children",[],[59],"9a9e39ce-2dad-11f1-bb61-42dde27851f2","README.md","9a9e3a82-2dad-11f1-bb61-42dde27851f2",11,["D",1775035907178],"# 🌿 PlantCare — Smart Plant Health Monitoring System\n\nA full-stack IoT-inspired smart plant health dashboard with real-time sensor monitoring, AI-based health analysis, automation controls, and trend visualization.\n\n## ✨ Features\n\n| Feature | Details |\n|---|---|\n| 📊 Live Dashboard | Soil moisture, temperature, humidity with progress bars |\n| 🚨 Smart Alerts | Color-coded warnings (🟢 Healthy / 🟡 Moderate / 🔴 Critical) |\n| 🧠 AI Decisions | Stress level analysis with actionable suggestions |\n| ⚙️ Automation | Auto watering & cooling fan toggle controls |\n| 📈 Trend Chart | Line graph of last 20 readings (Chart.js) |\n| 🏗️ Architecture | System diagram showing full IoT data flow |\n| 📡 REST API | POST sensor data from real Arduino/ESP32 |\n\n## 🏗️ System Architecture\n\n```mermaid\nflowchart LR\n A[🌡️ Sensors\\nMoisture • Temp • Humidity] -->|Analog Signal| B[🤖 Microcontroller\\nArduino / ESP32]\n B -->|HTTP POST /api/reading| C[☁️ Cloud API\\nVal Town Backend]\n C -->|SQLite Storage| D[(Database\\nSensor History)]\n C -->|analyzeHealth| E[🧠 AI Engine\\nStress Analysis]\n E -->|JSON Response| F[📱 Dashboard\\nReact UI]\n F -->|Toggle Controls| C\n```\n\n## 📁 Project Structure\n\n```\nplant-health-monitor/\n├── main.ts # HTTP entrypoint\n├── backend/\n│ ├── index.ts # Hono routes\n│ └── database.ts # SQLite queries\n├── shared/\n│ └── types.ts # Types + AI health analysis\n└── frontend/\n ├── index.html # HTML shell\n ├── style.css # Green eco theme\n └── app.tsx # React dashboard\n```\n\n## 🔌 API Endpoints\n\n### `GET /api/status`\nReturns latest sensor reading + AI health analysis + automation state.\n\n### `GET /api/history?limit=20`\nReturns last N readings for chart rendering.\n\n### `POST /api/reading`\nIngest real sensor data from Arduino/ESP32:\n```json\n{ \"soilMoisture\": 45, \"temperature\": 28, \"humidity\": 60 }\n```\n\n### `POST /api/simulate`\nGenerate a simulated sensor reading (for demo/testing).\n\n### `GET|POST /api/automation`\nRead or update watering/fan automation state.\n\n## 🤖 AI Health Logic\n\n| Condition | Score | Alert |\n|---|---|---|\n| Moisture < 20% | +3 | 🚨 Critical dry |\n| Moisture < 40% | +1 | ⚠️ Low moisture |\n| Temp > 38°C | +3 | 🔥 Critical heat |\n| Temp > 32°C | +1 | 🌡️ Too warm |\n| Temp < 10°C | +2 | 🥶 Too cold |\n| Humidity < 30% | +1 | 💨 Dry air |\n| Humidity > 85% | +1 | 🌧️ Fungal risk |\n\n- Score 0 → **Healthy** 🟢 \n- Score 1–2 → **Moderate** 🟡 \n- Score 3+ → **Critical** 🔴\n\n## 🌱 Connecting a Real Sensor (Arduino/ESP32)\n\n```cpp\n// Arduino / ESP32 snippet\n#include \n#include \n\nHTTPClient http;\nhttp.begin(\"https://your-val-endpoint.web.val.run/api/reading\");\nhttp.addHeader(\"Content-Type\", \"application/json\");\n\nString body = \"{\\\"soilMoisture\\\":\" + String(moistureVal) +\n \",\\\"temperature\\\":\" + String(tempVal) +\n \",\\\"humidity\\\":\" + String(humidityVal) + \"}\";\n\nint code = http.POST(body);\n```\n",[],[73],"eab947a6-2dac-11f1-a5ae-42dde27851f2","shared","eab94864-2dac-11f1-a5ae-42dde27851f2",4,["D",1775035612067],"directory",[88],[81],{"_33":89,"_13":90,"_37":91,"_44":82,"_35":36,"_48":92,"_62":63,"_46":93,"_17":43,"_42":94,"_40":95,"_67":68,"_50":-5,"_69":96,"_18":97},"f5af35c6-2dac-11f1-869a-42dde27851f2","types.ts","f5af36e8-2dac-11f1-869a-42dde27851f2",5,["D",1775035630463],"script","export interface SensorReading {\n id?: number;\n timestamp: string;\n soilMoisture: number; // 0-100 %\n temperature: number; // Celsius\n humidity: number; // 0-100 %\n}\n\nexport interface PlantStatus {\n health: \"Healthy\" | \"Moderate\" | \"Critical\";\n color: \"green\" | \"yellow\" | \"red\";\n alerts: string[];\n suggestions: string[];\n autoWater: boolean;\n autoFan: boolean;\n}\n\nexport interface AutomationState {\n autoWater: boolean;\n autoFan: boolean;\n}\n\nexport function analyzeHealth(reading: SensorReading, automation: AutomationState): PlantStatus {\n const alerts: string[] = [];\n const suggestions: string[] = [];\n let stressScore = 0;\n\n // Soil moisture analysis\n if (reading.soilMoisture < 20) {\n stressScore += 3;\n alerts.push(\"🚨 Soil is critically dry!\");\n suggestions.push(\"💧 Water your plant immediately — soil moisture is below 20%.\");\n } else if (reading.soilMoisture < 40) {\n stressScore += 1;\n alerts.push(\"⚠️ Soil moisture is low.\");\n suggestions.push(\"💧 Consider watering soon — moisture is under 40%.\");\n }\n\n // Temperature analysis\n if (reading.temperature > 38) {\n stressScore += 3;\n alerts.push(\"🔥 Temperature is critically high!\");\n suggestions.push(\"❄️ Activate cooling immediately — temperature exceeds 38°C.\");\n } else if (reading.temperature > 32) {\n stressScore += 1;\n alerts.push(\"🌡️ Temperature is above optimal range.\");\n suggestions.push(\"🌬️ Consider turning on the fan — temperature is above 32°C.\");\n } else if (reading.temperature < 10) {\n stressScore += 2;\n alerts.push(\"🥶 Temperature is too cold for most plants.\");\n suggestions.push(\"🌿 Move plant to a warmer location.\");\n }\n\n // Humidity analysis\n if (reading.humidity < 30) {\n stressScore += 1;\n alerts.push(\"💨 Air humidity is too low.\");\n suggestions.push(\"🌫️ Mist the leaves or use a humidifier.\");\n } else if (reading.humidity > 85) {\n stressScore += 1;\n alerts.push(\"🌧️ Humidity is very high — risk of fungal growth.\");\n suggestions.push(\"🌀 Improve air circulation to reduce humidity.\");\n }\n\n let health: PlantStatus[\"health\"];\n let color: PlantStatus[\"color\"];\n\n if (stressScore === 0) {\n health = \"Healthy\";\n color = \"green\";\n suggestions.push(\"✅ Plant conditions are optimal. Keep it up!\");\n } else if (stressScore <= 2) {\n health = \"Moderate\";\n color = \"yellow\";\n } else {\n health = \"Critical\";\n color = \"red\";\n }\n\n return {\n health,\n color,\n alerts,\n suggestions,\n autoWater: automation.autoWater,\n autoFan: automation.autoFan,\n };\n}\n",[],[81,90],"e7b02c28-2dac-11f1-b5c0-42dde27851f2",3,["D",1775035606983],[103,104,105],[52],{"_33":117,"_13":118,"_37":119,"_44":45,"_35":36,"_48":120,"_62":63,"_46":121,"_17":43,"_42":24,"_40":122,"_67":68,"_50":-5,"_69":123,"_18":124},{"_33":34,"_13":39,"_37":38,"_44":45,"_35":36,"_48":49,"_62":63,"_46":114,"_17":43,"_42":24,"_40":41,"_67":68,"_50":-5,"_69":115,"_18":116},{"_33":106,"_13":107,"_37":108,"_44":45,"_35":36,"_48":109,"_62":63,"_46":110,"_17":43,"_42":24,"_40":111,"_67":68,"_50":-5,"_69":112,"_18":113},"36ee554e-2dad-11f1-a442-42dde27851f2","style.css","36ee5652-2dad-11f1-a442-42dde27851f2",9,["D",1775035739931],"/* ── PlantCare Global Styles ── */\n:root {\n --green-dark: #1a4731;\n --green-mid: #2d7a4f;\n --green-light: #4caf82;\n --green-pale: #e8f5ee;\n --green-accent: #34d970;\n --yellow: #f5c842;\n --yellow-light: #fff8dc;\n --red: #e63946;\n --red-light: #fff0f0;\n --blue: #2196f3;\n --blue-light: #e3f2fd;\n --gray-100: #f4f6f4;\n --gray-200: #e2e8e4;\n --gray-500: #6b7c74;\n --gray-700: #374840;\n --white: #ffffff;\n --shadow: 0 4px 20px rgba(45, 122, 79, 0.12);\n --shadow-hover: 0 8px 32px rgba(45, 122, 79, 0.2);\n --radius: 16px;\n --radius-sm: 10px;\n --transition: 0.25s ease;\n}\n\n* { box-sizing: border-box; margin: 0; padding: 0; }\n\nbody {\n font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n background: var(--gray-100);\n color: var(--gray-700);\n min-height: 100vh;\n}\n\n/* ── Header ── */\n.header {\n background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-mid) 100%);\n color: white;\n padding: 0 24px;\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: sticky;\n top: 0;\n z-index: 100;\n box-shadow: 0 2px 16px rgba(0,0,0,0.2);\n}\n.header-brand { display: flex; align-items: center; gap: 12px; }\n.header-brand h1 { font-size: 1.3rem; font-weight: 700; letter-spacing: 0.5px; }\n.header-brand .logo { font-size: 1.8rem; }\n.header-right { display: flex; align-items: center; gap: 16px; }\n.live-badge {\n display: flex; align-items: center; gap: 6px;\n background: rgba(255,255,255,0.15);\n padding: 5px 12px;\n border-radius: 20px;\n font-size: 0.8rem;\n font-weight: 600;\n}\n.live-dot {\n width: 8px; height: 8px;\n border-radius: 50%;\n background: var(--green-accent);\n animation: pulse 1.5s infinite;\n}\n@keyframes pulse {\n 0%, 100% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.5; transform: scale(1.4); }\n}\n.source-link {\n color: rgba(255,255,255,0.7);\n text-decoration: none;\n font-size: 0.8rem;\n}\n.source-link:hover { color: white; }\n\n/* ── Layout ── */\n.container { max-width: 1200px; margin: 0 auto; padding: 24px 20px; }\n\n/* ── Health Banner ── */\n.health-banner {\n border-radius: var(--radius);\n padding: 20px 28px;\n margin-bottom: 24px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 12px;\n transition: var(--transition);\n}\n.health-banner.green { background: linear-gradient(135deg, #1e7c4a, #2d9e63); color: white; }\n.health-banner.yellow { background: linear-gradient(135deg, #c78f00, #e5a800); color: white; }\n.health-banner.red { background: linear-gradient(135deg, #b0222d, #d9323d); color: white; }\n.health-banner-left { display: flex; align-items: center; gap: 16px; }\n.health-icon { font-size: 2.8rem; }\n.health-title { font-size: 0.85rem; opacity: 0.85; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; }\n.health-status { font-size: 1.8rem; font-weight: 800; }\n.health-timestamp { font-size: 0.8rem; opacity: 0.75; margin-top: 2px; }\n.simulate-btn {\n background: rgba(255,255,255,0.2);\n border: 2px solid rgba(255,255,255,0.4);\n color: white;\n padding: 10px 20px;\n border-radius: 30px;\n cursor: pointer;\n font-size: 0.85rem;\n font-weight: 600;\n transition: var(--transition);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.simulate-btn:hover { background: rgba(255,255,255,0.3); transform: translateY(-1px); }\n.simulate-btn:active { transform: translateY(0); }\n\n/* ── Sensor Cards ── */\n.section-title {\n font-size: 1rem;\n font-weight: 700;\n color: var(--green-dark);\n text-transform: uppercase;\n letter-spacing: 0.8px;\n margin-bottom: 14px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.cards-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n gap: 16px;\n margin-bottom: 28px;\n}\n.sensor-card {\n background: var(--white);\n border-radius: var(--radius);\n padding: 24px 20px;\n box-shadow: var(--shadow);\n transition: var(--transition);\n position: relative;\n overflow: hidden;\n}\n.sensor-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }\n.sensor-card::before {\n content: '';\n position: absolute;\n top: 0; left: 0; right: 0;\n height: 4px;\n}\n.sensor-card.moisture::before { background: linear-gradient(90deg, #2196f3, #64b5f6); }\n.sensor-card.temperature::before { background: linear-gradient(90deg, #ff6b35, #ff9a5c); }\n.sensor-card.humidity::before { background: linear-gradient(90deg, #26a69a, #4db6ac); }\n\n.card-icon {\n width: 48px; height: 48px;\n border-radius: 12px;\n display: flex; align-items: center; justify-content: center;\n font-size: 1.4rem;\n margin-bottom: 14px;\n}\n.card-icon.moisture { background: var(--blue-light); }\n.card-icon.temperature { background: #fff3e0; }\n.card-icon.humidity { background: #e0f2f1; }\n\n.card-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--gray-500); margin-bottom: 6px; }\n.card-value { font-size: 2.4rem; font-weight: 800; color: var(--gray-700); line-height: 1; }\n.card-unit { font-size: 1rem; font-weight: 400; color: var(--gray-500); }\n.card-bar { margin-top: 12px; height: 6px; background: var(--gray-200); border-radius: 3px; overflow: hidden; }\n.card-bar-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; }\n.moisture .card-bar-fill { background: linear-gradient(90deg, #2196f3, #64b5f6); }\n.temperature .card-bar-fill { background: linear-gradient(90deg, #ff6b35, #ff9a5c); }\n.humidity .card-bar-fill { background: linear-gradient(90deg, #26a69a, #4db6ac); }\n.card-status { font-size: 0.78rem; margin-top: 8px; font-weight: 600; }\n\n/* ── Two-col layout ── */\n.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }\n@media (max-width: 768px) { .two-col { grid-template-columns: 1fr; } }\n\n/* ── Alerts Panel ── */\n.panel {\n background: var(--white);\n border-radius: var(--radius);\n padding: 22px 20px;\n box-shadow: var(--shadow);\n}\n.alert-item {\n display: flex; align-items: flex-start; gap: 10px;\n padding: 10px 14px;\n border-radius: var(--radius-sm);\n margin-bottom: 8px;\n font-size: 0.87rem;\n font-weight: 500;\n}\n.alert-item:last-child { margin-bottom: 0; }\n.alert-item.green { background: var(--green-pale); color: var(--green-dark); }\n.alert-item.yellow { background: var(--yellow-light); color: #7a5800; }\n.alert-item.red { background: var(--red-light); color: #8b0000; }\n.no-alerts { color: var(--gray-500); font-size: 0.88rem; text-align: center; padding: 20px 0; }\n\n/* ── AI Suggestions ── */\n.suggestion-item {\n display: flex; align-items: flex-start; gap: 10px;\n padding: 10px 14px;\n border-radius: var(--radius-sm);\n margin-bottom: 8px;\n font-size: 0.87rem;\n background: var(--green-pale);\n color: var(--green-dark);\n font-weight: 500;\n}\n\n/* ── Automation Controls ── */\n.automation-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n margin-bottom: 28px;\n}\n.control-card {\n background: var(--white);\n border-radius: var(--radius);\n padding: 22px 20px;\n box-shadow: var(--shadow);\n display: flex;\n align-items: center;\n justify-content: space-between;\n transition: var(--transition);\n}\n.control-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }\n.control-left { display: flex; align-items: center; gap: 14px; }\n.control-icon { font-size: 2rem; }\n.control-name { font-size: 0.95rem; font-weight: 700; color: var(--gray-700); }\n.control-sub { font-size: 0.78rem; color: var(--gray-500); margin-top: 2px; }\n\n/* Toggle switch */\n.toggle { position: relative; display: inline-block; width: 52px; height: 28px; }\n.toggle input { opacity: 0; width: 0; height: 0; }\n.slider {\n position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;\n background-color: var(--gray-200);\n transition: .3s;\n border-radius: 28px;\n}\n.slider:before {\n position: absolute; content: \"\";\n height: 20px; width: 20px;\n left: 4px; bottom: 4px;\n background-color: white;\n transition: .3s;\n border-radius: 50%;\n box-shadow: 0 2px 6px rgba(0,0,0,0.2);\n}\ninput:checked + .slider { background-color: var(--green-light); }\ninput:checked + .slider:before { transform: translateX(24px); }\n.toggle-label { font-size: 0.75rem; font-weight: 700; margin-top: 4px; text-align: center; color: var(--gray-500); }\ninput:checked ~ .toggle-label { color: var(--green-mid); }\n\n/* ── Chart ── */\n.chart-panel {\n background: var(--white);\n border-radius: var(--radius);\n padding: 22px 20px 18px;\n box-shadow: var(--shadow);\n margin-bottom: 28px;\n}\n.chart-container { position: relative; height: 260px; }\n\n/* ── Architecture Diagram ── */\n.arch-panel {\n background: var(--white);\n border-radius: var(--radius);\n padding: 24px 20px;\n box-shadow: var(--shadow);\n margin-bottom: 28px;\n}\n.arch-flow {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n gap: 8px;\n padding: 20px 0;\n}\n.arch-node {\n display: flex; flex-direction: column; align-items: center;\n background: var(--green-pale);\n border: 2px solid var(--green-light);\n border-radius: var(--radius);\n padding: 16px 20px;\n min-width: 110px;\n text-align: center;\n transition: var(--transition);\n}\n.arch-node:hover { background: var(--green-light); color: white; transform: translateY(-2px); box-shadow: var(--shadow); }\n.arch-node .node-icon { font-size: 1.8rem; margin-bottom: 6px; }\n.arch-node .node-title { font-size: 0.78rem; font-weight: 700; color: var(--green-dark); text-transform: uppercase; letter-spacing: 0.5px; }\n.arch-node .node-sub { font-size: 0.7rem; color: var(--gray-500); margin-top: 2px; }\n.arch-node:hover .node-title, .arch-node:hover .node-sub { color: white; }\n.arch-arrow { font-size: 1.5rem; color: var(--green-mid); padding: 0 4px; }\n\n/* ── Footer ── */\n.footer {\n text-align: center;\n padding: 20px;\n color: var(--gray-500);\n font-size: 0.82rem;\n}\n.footer a { color: var(--green-mid); text-decoration: none; }\n\n/* ── Loading ── */\n.loading {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n height: 100vh;\n gap: 16px;\n color: var(--green-mid);\n}\n.spinner {\n width: 48px; height: 48px;\n border: 4px solid var(--green-pale);\n border-top-color: var(--green-mid);\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n}\n@keyframes spin { to { transform: rotate(360deg); } }\n\n/* ── Responsive ── */\n@media (max-width: 480px) {\n .health-banner { padding: 16px 18px; }\n .health-status { font-size: 1.4rem; }\n .automation-grid { grid-template-columns: 1fr; }\n .header-brand h1 { font-size: 1.1rem; }\n .card-value { font-size: 2rem; }\n}\n",[],[52,107],["D",1775035683776],[],[52,39],"5c462178-2dad-11f1-88b9-42dde27851f2","app.tsx","5c462236-2dad-11f1-88b9-42dde27851f2",10,["D",1775035802582],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useRef, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// ── Types ────────────────────────────────────────────────────\ninterface SensorReading {\n id?: number;\n timestamp: string;\n soilMoisture: number;\n temperature: number;\n humidity: number;\n}\ninterface PlantStatus {\n health: \"Healthy\" | \"Moderate\" | \"Critical\";\n color: \"green\" | \"yellow\" | \"red\";\n alerts: string[];\n suggestions: string[];\n}\ninterface AutomationState {\n autoWater: boolean;\n autoFan: boolean;\n}\n\n// ── Chart.js chart component ─────────────────────────────────\ndeclare const Chart: any;\n\nfunction TrendChart({ history }: { history: SensorReading[] }) {\n const canvasRef = useRef(null);\n const chartRef = useRef(null);\n\n useEffect(() => {\n if (!canvasRef.current || history.length === 0) return;\n const labels = history.map((r) => {\n const d = new Date(r.timestamp);\n return `${d.getHours().toString().padStart(2,\"0\")}:${d.getMinutes().toString().padStart(2,\"0\")}`;\n });\n\n if (chartRef.current) {\n chartRef.current.data.labels = labels;\n chartRef.current.data.datasets[0].data = history.map((r) => r.soilMoisture);\n chartRef.current.data.datasets[1].data = history.map((r) => r.temperature);\n chartRef.current.data.datasets[2].data = history.map((r) => r.humidity);\n chartRef.current.update();\n } else {\n chartRef.current = new Chart(canvasRef.current, {\n type: \"line\",\n data: {\n labels,\n datasets: [\n {\n label: \"Soil Moisture (%)\",\n data: history.map((r) => r.soilMoisture),\n borderColor: \"#2196f3\",\n backgroundColor: \"rgba(33,150,243,0.08)\",\n tension: 0.4,\n fill: true,\n pointRadius: 3,\n pointHoverRadius: 5,\n },\n {\n label: \"Temperature (°C)\",\n data: history.map((r) => r.temperature),\n borderColor: \"#ff6b35\",\n backgroundColor: \"rgba(255,107,53,0.08)\",\n tension: 0.4,\n fill: true,\n pointRadius: 3,\n pointHoverRadius: 5,\n },\n {\n label: \"Humidity (%)\",\n data: history.map((r) => r.humidity),\n borderColor: \"#26a69a\",\n backgroundColor: \"rgba(38,166,154,0.08)\",\n tension: 0.4,\n fill: true,\n pointRadius: 3,\n pointHoverRadius: 5,\n },\n ],\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n interaction: { mode: \"index\", intersect: false },\n plugins: {\n legend: { position: \"top\", labels: { font: { size: 12, weight: \"600\" }, padding: 16, usePointStyle: true } },\n tooltip: { backgroundColor: \"#1a4731\", titleColor: \"#fff\", bodyColor: \"#e8f5ee\", padding: 10, cornerRadius: 8 },\n },\n scales: {\n x: { grid: { color: \"rgba(0,0,0,0.04)\" }, ticks: { font: { size: 11 } } },\n y: { grid: { color: \"rgba(0,0,0,0.04)\" }, ticks: { font: { size: 11 } }, min: 0, max: 100 },\n },\n },\n });\n }\n }, [history]);\n\n return