new ui and daily report

src/components/daily-report/SummaryTab.tsx

@@ -0,0 +1,77 @@
+import { SummaryCard } from './SummaryCard'
+
+type SummaryTabProps = {
+    temperature: {
+        current: number
+        min: number
+        max: number
+        data: number[]
+    }
+    humidity: {
+        current: number
+        min: number
+        max: number
+        data: number[]
+    }
+    soil: {
+        current: number
+        min: number
+        max: number
+        data: number[]
+    }
+    gas: {
+        current: number
+        min: number
+        max: number
+        data: number[]
+    }
+    lux: {
+        current: number
+        min: number
+        max: number
+        data: number[]
+    }
+}
+
+export function SummaryTab({ temperature, humidity, soil, gas, lux }: SummaryTabProps) {
+    return (
+        <div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+            <SummaryCard
+                param="temperature"
+                currentValue={temperature.current}
+                minValue={temperature.min}
+                maxValue={temperature.max}
+                data={temperature.data}
+            />
+            <SummaryCard
+                param="humidity"
+                currentValue={humidity.current}
+                minValue={humidity.min}
+                maxValue={humidity.max}
+                data={humidity.data}
+            />
+            <SummaryCard
+                param="soil"
+                currentValue={soil.current}
+                minValue={soil.min}
+                maxValue={soil.max}
+                data={soil.data}
+            />
+            <SummaryCard
+                param="gas"
+                currentValue={gas.current}
+                minValue={gas.min}
+                maxValue={gas.max}
+                data={gas.data}
+            />
+            <SummaryCard
+                param="lux"
+                currentValue={lux.current}
+                minValue={lux.min}
+                maxValue={lux.max}
+                data={lux.data}
+            />
+        </div>
+    )
+}
+